<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {useRouter} from 'vue-router'
import TopNav from '@/components/TopNav.vue'
import RecipeCard from '@/components/RecipeCard.vue'
import {queryPage} from "@/api/recipe";
import {ElMessage} from "element-plus";

const router = useRouter()

const featuredRecipes = ref<Recipe[]>([])
const latestRecipes = ref<Recipe[]>([])
// 模拟数据
/*const mockRecipes: Recipe[] = [
  {
    id: '1',
    title: '红烧肉',
    description: '经典家常菜，肥而不腻，入口即化',
    image: BlueGirl,
    cookTime: 60,
    rating: 4.8,
    isFavorite: false
  },
  {
    id: '2',
    title: '宫保鸡丁',
    description: '川菜经典，麻辣鲜香，下饭神器',
    image: BlueGirl,
    cookTime: 30,
    rating: 4.6,
    isFavorite: true
  },
  {
    id: '3',
    title: '糖醋排骨',
    description: '酸甜可口，老少皆宜的美味',
    image: BlueGirl,
    cookTime: 45,
    rating: 4.7,
    isFavorite: false
  },
  {
    id: '4',
    title: '麻婆豆腐',
    description: '四川名菜，麻辣鲜香，嫩滑爽口',
    image: BlueGirl,
    cookTime: 20,
    rating: 4.5,
    isFavorite: true
  },
  {
    id: '5',
    title: '清蒸鲈鱼',
    description: '清淡鲜美，营养丰富，老少皆宜',
    image: BlueGirl,
    cookTime: 25,
    rating: 4.9,
    isFavorite: false
  },
  {
    id: '6',
    title: '蒜蓉西兰花',
    description: '清爽健康，简单易做的素菜',
    image: BlueGirl,
    cookTime: 15,
    rating: 4.3,
    isFavorite: false
  }
]*/
const mockRecipes = ref<Recipe[]>([])
const getPage = async () => {
  const res: any = await queryPage({});
  if (res.code != 200) {
    ElMessage.error(res.message)
    return
  }
  mockRecipes.value = res.data;
}
const handleSearch = () => {
  router.push('/search')
}

const handleAdd = () => {
  router.push('/add-recipe')
}

const toggleFavorite = (recipeId: string) => {
  const updateFavorites = (recipes: Recipe[]) => {
    const recipe = recipes.find(r => r.id === recipeId)
    if (recipe) {
      recipe.isFavorite = !recipe.isFavorite
    }
  }

  updateFavorites(featuredRecipes.value)
  updateFavorites(latestRecipes.value)
}

onMounted(async () => {
  // 模拟加载数据
  await getPage()
  featuredRecipes.value = mockRecipes.value.slice(0, 3)
  latestRecipes.value = mockRecipes.value.slice(3)
})
</script>

<template>
  <div class="home-page">
    <TopNav
        title="美味佳肴"
        :show-add="true"
        @search="handleSearch"
        @add="handleAdd"
    />

    <main class="main-content">
      <!-- 欢迎横幅 -->
      <section class="welcome-banner">
        <div class="banner-content">
          <h2>发现美味，分享快乐</h2>
          <p>探索各种美食食谱，记录你的烹饪心得</p>
        </div>
      </section>

      <!-- 推荐食谱 -->
      <section class="featured-recipes">
        <h3 class="section-title">推荐食谱</h3>
        <div class="recipes-grid">
          <RecipeCard
              v-for="recipe in featuredRecipes"
              :key="recipe.id"
              :recipe="recipe"
              @favorite-toggle="toggleFavorite"
          />
        </div>
      </section>

      <!-- 最新食谱 -->
      <section class="latest-recipes">
        <h3 class="section-title">最新食谱</h3>
        <div class="recipes-grid">
          <RecipeCard
              v-for="recipe in latestRecipes"
              :key="recipe.id"
              :recipe="recipe"
              @favorite-toggle="toggleFavorite"
          />
        </div>
      </section>
    </main>
  </div>
</template>

<style lang="scss" scoped>
.home-page {
  min-height: 100vh;
  background-color: var(--color-background);
}

.main-content {
  padding: var(--spacing-md);
  max-width: 1200px;
  margin: 0 auto;
}

.welcome-banner {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
  color: white;
  text-align: center;

  h2 {
    font-size: var(--font-size-xxl);
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
  }

  p {
    font-size: var(--font-size-md);
    opacity: 0.9;
  }
}

.section-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--spacing-lg);
  padding-left: var(--spacing-sm);
  border-left: 4px solid var(--color-primary);
}

.recipes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

@media (max-width: 768px) {
  .recipes-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .welcome-banner {
    padding: var(--spacing-lg);

    h2 {
      font-size: var(--font-size-xl);
    }
  }
}
</style>
